<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跨域功能测试页面</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .test-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #fafafa;
        }
        .test-section h3 {
            color: #555;
            margin-top: 0;
        }
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .result {
            margin-top: 15px;
            padding: 10px;
            border-radius: 4px;
            background-color: #f8f9fa;
            border-left: 4px solid #007bff;
            font-family: monospace;
            white-space: pre-wrap;
            max-height: 200px;
            overflow-y: auto;
        }
        .success {
            border-left-color: #28a745;
            background-color: #d4edda;
        }
        .error {
            border-left-color: #dc3545;
            background-color: #f8d7da;
        }
        input[type="email"] {
            width: 200px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🌐 Spring Boot 跨域功能测试</h1>
        
        <div class="test-section">
            <h3>1. 测试公开接口 (GET)</h3>
            <button onclick="testPublicAPI()">测试 /test/public</button>
            <div id="publicResult" class="result"></div>
        </div>

        <div class="test-section">
            <h3>2. 测试健康检查接口 (GET)</h3>
            <button onclick="testHealthAPI()">测试 /test/health</button>
            <div id="healthResult" class="result"></div>
        </div>

        <div class="test-section">
            <h3>3. 测试验证码发送接口 (POST)</h3>
            <input type="email" id="emailInput" placeholder="输入邮箱地址" value="test@example.com">
            <button onclick="testSendCode()">发送验证码</button>
            <div id="codeResult" class="result"></div>
        </div>

        <div class="test-section">
            <h3>4. 测试Redis功能 (GET)</h3>
            <button onclick="testRedisAPI()">测试 /test/redis/test</button>
            <div id="redisResult" class="result"></div>
        </div>

        <div class="test-section">
            <h3>5. 测试用户注册 (POST)</h3>
            <button onclick="testRegister()">测试用户注册</button>
            <div id="registerResult" class="result"></div>
        </div>

        <div class="test-section">
            <h3>6. 测试用户登录 (POST)</h3>
            <button onclick="testLogin()">测试用户登录</button>
            <div id="loginResult" class="result"></div>
        </div>
    </div>

    <script>
        const API_BASE = 'http://localhost:8080';

        function displayResult(elementId, data, isSuccess = true) {
            const element = document.getElementById(elementId);
            element.textContent = JSON.stringify(data, null, 2);
            element.className = isSuccess ? 'result success' : 'result error';
        }

        function displayError(elementId, error) {
            const element = document.getElementById(elementId);
            element.textContent = `错误: ${error.message}`;
            element.className = 'result error';
        }

        async function testPublicAPI() {
            try {
                const response = await fetch(`${API_BASE}/test/public`, {
                    method: 'GET',
                    credentials: 'include',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });
                const data = await response.json();
                displayResult('publicResult', data);
            } catch (error) {
                displayError('publicResult', error);
            }
        }

        async function testHealthAPI() {
            try {
                const response = await fetch(`${API_BASE}/test/health`, {
                    method: 'GET',
                    credentials: 'include',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });
                const data = await response.json();
                displayResult('healthResult', data);
            } catch (error) {
                displayError('healthResult', error);
            }
        }

        async function testSendCode() {
            const email = document.getElementById('emailInput').value;
            if (!email) {
                displayError('codeResult', { message: '请输入邮箱地址' });
                return;
            }

            try {
                const response = await fetch(`${API_BASE}/api/verification/sendcode`, {
                    method: 'POST',
                    credentials: 'include',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `email=${encodeURIComponent(email)}`
                });
                const data = await response.json();
                displayResult('codeResult', data);
            } catch (error) {
                displayError('codeResult', error);
            }
        }

        async function testRedisAPI() {
            try {
                const response = await fetch(`${API_BASE}/test/redis/test`, {
                    method: 'GET',
                    credentials: 'include',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });
                const data = await response.json();
                displayResult('redisResult', data);
            } catch (error) {
                displayError('redisResult', error);
            }
        }

        async function testRegister() {
            try {
                const response = await fetch(`${API_BASE}/auth/register`, {
                    method: 'POST',
                    credentials: 'include',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        username: 'testuser_' + Date.now(),
                        email: 'test_' + Date.now() + '@example.com',
                        password: 'password123'
                    })
                });
                const data = await response.json();
                displayResult('registerResult', data);
            } catch (error) {
                displayError('registerResult', error);
            }
        }

        async function testLogin() {
            try {
                const response = await fetch(`${API_BASE}/auth/login`, {
                    method: 'POST',
                    credentials: 'include',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        username: 'testuser',
                        password: 'password123'
                    })
                });
                const data = await response.json();
                displayResult('loginResult', data);
            } catch (error) {
                displayError('loginResult', error);
            }
        }
    </script>
</body>
</html>
